<template>
	<view class="note-wrap">
		<view class="avatar" @tap="jumpTo(`/pages/user/info?id=${info.userId}`)" :style="{backgroundImage: `url(${info.avatarUrl}),url('https://s1.ax1x.com/2023/03/19/ppY2oq0.jpg')`}">
			
		</view>
		<view class="panel">
			<view class="">
				<text class="u-font-32 text-bold text-link" @tap="jumpTo(`/pages/user/info?id=${info.userId}`)">{{info.userName}}</text>
			</view>
			<view class="u-m-t-6" v-if="info.content">
				<text class="u-font-32">{{info.content}}</text>
			</view>
			<view class="media u-m-t-20" :class="{one:info.imageList&&info.imageList.length==1,two:info.imageList&&(info.imageList.length==4||info.imageList.length==2)}">
				<view class="item" :class="{horizontal:item.width>item.height,vertical:item.width<item.height}" v-for="(item,idx) in info.imageList" :key="idx" @tap="previewImage(item)">
					<image class="fill" :src="item.smallUrl||item.mediaUrl" mode="aspectFill"></image>
				</view>
				<view class="video" :class="{horizontal:video.width>video.height,vertical:video.width<video.height}" v-for="(video,index) in info.videoList" :key="index" @tap="previewVideo(video)">
					<image class="fill" :src="video.smallUrl" mode="aspectFill"></image>
				</view>
			</view>
			<view class="u-m-t-10" v-if="info.addr">
				<text class="u-font-26 text-link">{{info.addr}}</text>
			</view>
			<view class="u-flex u-row-between u-m-t-10">
				<view class="">
					<text class="u-font-26 text-gray u-m-r-30">{{info.createDate|dateDiff}}</text>
					<text class="u-font-26 text-link" v-if="userId==info.userId" @tap="onRemove">删除</text>
				</view>
				<view class="more-oper">
					<view class="oper-mask" :class="{show:oper.show}" @touchstart="closePop">
					</view>
					<view class="oper-box" :class="{show:oper.show}">
						<view class="item u-font-32" @tap.stop="onPraise">
							<text class="iconfont u-m-r-10" :class="{'icon-heart':info.isPraise=='0','icon-heartfill text-red':info.isPraise=='1'}"></text>
							<text>{{info.isPraise=='1'?'取消':'赞'}}</text>
						</view>
						<view class="item u-font-32" @tap.stop="onComment()">
							<text class="iconfont icon-comment u-m-r-10"></text>
							<text>评论</text>
						</view>
					</view>
					<view class="more-icon iconfont icon-more text-link" @tap="oper.show = !oper.show"></view>
				</view>
			</view>
			<view class="sub-panel u-m-t-20">
				<view v-if="info.praiseList&&info.praiseList.length" class="praise-box u-border-bottom text-link u-p-10">
					<text class="iconfont icon-heart text-link u-m-r-10"></text>
					<!-- @tap="jumpTo(`/pages/user/info?id=${item.userId}`)" -->
					<text class="item" v-for="(item,idx) in info.praiseList" :key="idx">{{item.userName}}</text>
				</view>
				<view class="comment-box u-p-10" v-if="info.commentList&&info.commentList.length">
					<view class="item" v-for="item in info.commentList" :key="item.id" @tap="onComment(item)">
						<text class="text-link" @tap.stop="jumpTo(`/pages/user/info?id=${item.userId}`)">{{item.userName}}</text>
						<text v-if="item.parentId">回复</text>
						<text v-if="item.parentId" class="text-link" @tap.stop="jumpTo(`/pages/user/info?id=${item.parentUserId}`)">{{item.parentUserName}}</text>
						<text>：</text>
						<text>{{item.content}}</text>
					</view>
					<view class="text-link u-text-center u-m-t-6" v-if="!info.nomore" @tap="moreComment">-------更多评论-------</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	import {dateDiff,jumpTo} from "@/utils/util.js"
	import {previewImage} from "@/utils/file.js"
	export default{
		props:{
			info:{
				type:Object,
				required:true
			}
		},
		data(){
			return{
				oper:{
					show:false
				}
			}
		},
		computed:{
			...mapGetters('user',['userId'])
		},
		filters:{
			dateDiff
		},
		methods:{
			jumpTo,
			openPop(e){
				this.oper.show = true
			},
			closePop(e){
				this.oper.show = false
			},
			onPraise(){
				this.closePop()
				this.$emit('praise')
			},
			onComment(comment){
				this.closePop()
				this.$emit('comment',comment)
			},
			moreComment(){
				this.$emit('moreComment')
			},
			onRemove(){
				this.$emit('remove')
			},
			previewImage(img){
				previewImage({
					current:img.mediaUrl,
					urls:this.info.imageList.map(({mediaUrl})=>mediaUrl)
				})
			},
			previewVideo(video){
				jumpTo(`/pages/preVideo/preVideo?src=${video.mediaUrl}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text-link{
		color: #5e6b87;
	}
	.noshrink{
		flex-shrink: 0;
	}
	.restgrow{
		flex-grow: 1;
		width: 100rpx;
	}
	.note-wrap{
		display: flex;
		.avatar{
			width: 80rpx;
			height: 80rpx;
			border-radius: 14rpx;
			background-size: cover;
			background-position: center;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
		.panel{
			width: 100rpx;
			flex: 1;
		}
		.more-oper{
			background-color: #eeeeee;
			border-radius: 6rpx;
			padding: 0 10rpx;
			position: relative;
		}
		.more-icon{
			position: relative;
			z-index: 2;
		}
		.oper-mask{
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			&.show{
				display: block;
			}
		}
		.oper-box{
			position: absolute;
			left: -320rpx;
			top: 50%;
			transform: translateY(-50%) scaleX(0);
			transform-origin: right;
			width: 300rpx;
			height: 68rpx;
			border-radius: 10rpx;
			display: flex;
			background-color: #666666;
			color: #ffffff;
			transition: all 100ms ease-out;
			z-index: 10;
			&.show{
				transform: translateY(-50%) scaleY(1);
			}
			.item{
				flex: 1;
				padding: 14rpx 0;
				text-align: center;
			}
		}
		.sub-panel{
			background-color: #F5F5F5;
		}
	}
	.media{
		display: flex;
		flex-wrap: wrap;
		&.two{
			padding-right: 180rpx;
		}
		&.one{
			.item{
				width: 270rpx;
				height: 270rpx;
			}
			.horizontal{
				width: 360rpx;
			}
			.vertical{
				height: 360rpx;
			}
		}
		.item{
			width: 180rpx;
			height: 180rpx;
			margin-right: 6rpx;
			margin-bottom: 6rpx;
		}
		.fill{
			width: 100%;
			height: 100%;
		}
		.video{
			width: 270rpx;
			height: 270rpx;
			position: relative;
			&.horizontal{
				width: 360rpx;
			}
			&.vertical{
				height: 360rpx;
			}
			&::after{
				position: absolute;
				top: 50%;
				left: 50%;
				content: '\e98c';
				font-family: 'iconfont';
				line-height: 1;
				padding: 10rpx;
				font-size: 50rpx;
				color: #ffffff;
				border: 4rpx solid #ffffff;
				border-radius: 50%;
				transform: translate(-50%,-50%);
			}
		}
	}
	.praise-box{
		line-height: 1.3;
		.item{
			&::after{
				content: '，';
			}
			&:last-child::after{
				content: '';
			}
		}
	}
	.comment-box{
		.item{
			&+.item{
				margin-top: 6rpx;
			}
		}
	}
</style>